
html {
  font-size: 26.66666666vw;
}

body {
  font-size: .2rem;
}

nav {
  height: .5rem;
  line-height: .5rem;
  padding: 0 .3em;
  background: #0C9A9A;
  color: #fff;
  position: sticky;
  top: 0;
}

.th {
  display: flex;
  height: .4rem;
  align-items: center;
  font-size: .16rem;
  line-height: .4rem;
  text-align: center;
  position: sticky;
  top: .5rem;
  border-bottom: .01rem solid #fff;
}

.th .rank {
  height: .4rem;
  width: .4rem;
  background: #73f70e;
}

.th .pm-25 {
  height: .4rem;
  width: .7rem;
  background: #20a2f7;
}

.th .area {
  height: .4rem;
  width: 1.8rem;
  background: #f7e50a;
}

.th .quality {
  flex: 1;
  height: .4rem;
  background: #f711ef;
}


.item {
  display: flex;
  height: .4rem;
  align-items: center;
  font-size: .16rem;
  line-height: .4rem;
  text-align: center;
  border-top: .01rem solid #fff;
}

.item .rank {
  height: .4rem;
  width: .4rem;
  background: #73f70e;
  color: #fff;
}

.item .pm-25 {
  height: .4rem;
  width: .7rem;
  background: #20a2f7;
  color: #fff;
}

.item .area {
  height: .4rem;
  width: 1.8rem;
  background: #f7e50a;
  color: #231092;
}

.item .quality {
  flex: 1;
  height: .4rem;
  background: #f711ef;
  color: #fff;
}

.loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error {
  font-size: .14rem;
  color: #a7a6ac;
  text-align: center;
  padding-top: 1rem;
}

